<template>
  <a-modal
    v-model:open="state.dialog.isShowDialog"
    :title="state.dialog.title"
    @ok="handleSubmit"
    @cancel="handleReset"
    :width="520"
    centered
  >
    <div>
      <div class="mb-[10px]">
        <p>问题描述</p>
        <p>
          <a-textarea
            v-model:value="formState.question"
            :rows="4"
            allow-clear
          />
        </p>
      </div>
      <div>
        <p>
          <span>分析计划</span>
          <a-button type="primary" class="ml-[10px]">生成</a-button>
        </p>
        <p class="mt-[6px]">
          <a-textarea v-model:value="formState.plan" :rows="4" allow-clear />
        </p>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
  import { reactive } from 'vue';

  const emit = defineEmits(['refresh']);

  interface FormState {
    question?: string;
    plan?: string;
  }

  const formState = reactive<FormState>({});

  const state = reactive({
    dialog: {
      isShowDialog: false,
      title: '新增案例',
    },
  });

  const openDialog = () => {
    state.dialog.isShowDialog = true;
  };

  // 提交处理[5](@ref)
  const handleSubmit = async () => {
    try {
      // 调用API接口提交数据
      state.dialog.isShowDialog = false;
    } catch (error) {
      console.error('表单验证失败:', error);
    }
  };

  // 重置表单
  const handleReset = () => {
    state.dialog.isShowDialog = false;
  };

  // 暴露变量
  defineExpose({
    openDialog,
  });
</script>

<style scoped></style>
